<template>
    <!--<div v-loading.fullscreen.lock='loading' element-loading-text='正在加载中' element-loading-background='rgba(0, 0, 0, 0.8)'>-->
    <div class='listitem'>
        <!--    本组件接收歌曲列表的信息产生列表   判断是否为个人中心我的收藏页，若是则取mystar，否则取父组件值-->
        <!--key 的歌曲id经常性报错 还是用index吧。。-->
        <div class='songslist' v-for='(item,index) in isPersonalCenter==true?$store.state.mystar:songsinfo' :key='index' @click.stop='listenSong(item)'>
            <div class='songslistleft'>
                <!--checkbox-->
                <el-checkbox v-show="ischeckbox" v-model="checkboxNum[index]" @change="handleCheckBox" class="checkboxdiv"></el-checkbox>
                <!--判断是否为排行榜页，如果是则隐藏图片显示数字-->
                <span class='songsnum' v-show="isrankinfo">{{index+1}}</span>
                <img :src='item.imgUrl||defaultpic' class='songsimg' v-show="!isrankinfo && !ischeckbox">
                <!--判断是否点击了个人中心的 多选 按钮-->
                <div class='light'>
                    <span>{{item.filename}}</span>
                </div>
            </div>
            <div class='songslistright' v-show="!ischeckbox">
                <div class='mystar' @click.stop='clickMystarBtn(item)'>
                    <i :class="isMystar(item.id)?'el-icon-star-on':'el-icon-star-off'"></i>
                </div>
                <div class='addbtn' @click.stop='addToList(item)'>
                    <i class='el-icon-document-add'></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import defaultpic from 'common/image/default.png'

  export default {
    name: 'listitem',
    data() {
      return {
        defaultpic,
        checked: false,
        checkboxNum: []
      }
    },
    // songsinfo：传递过来的歌曲信息，
    // isrankinfo是否为排行榜详情页（是则显示序号，否则显示图片）
    // 个人中心我的收藏部分：ischeckbox：是否为多选功能，ischeckall：用于监听父组件值变化，checkall：父组件的全选状态，add:添加到列表，cancel：取消收藏，isPersonalCenter：是否为个人中心我的收藏
    props: ['songsinfo', 'isrankinfo', 'ischeckbox', 'ischeckall', 'checkall', 'add', 'cancel', 'isPersonalCenter'],
    created() {
      //  初始化序号
      for (let i = 0; i < this.$store.state.mystar.length; i++) {
        this.checkboxNum[i] = false;
      }
    },
    methods: {
      // 监听checkbox
      handleCheckBox(val) {
        // 判断是否有没有选中的框，有则取消全选，无则全选
        console.log(this.checkboxNum)
        let flag = this.checkboxNum.some(i => {
          if (i == false) {
            return true
          }
        });
        if(flag==true) {
          this.$emit('changecheckall',false)
        }else {
          this.$emit('changecheckall',true)
        }
      },
      listenSong(item) {
        //判断是否为checkbox多选模式    如果是则click事件为点击checkbox，否则为播放音乐
        if (this.ischeckbox) {
          this.checked = !this.checked;
        } else {
          if (item.error == '需要付费') { // eslint-disable-line
            // 弹窗提示付费歌无法播放
            this.$message({
              type: 'error',
              showClose: true,
              message: '该歌曲需要付费无法播放哦',
              center: true
            })
          } else {
            // this.$store.commit('setnowSongInfo',{'url':url,'imgUrl':imgUrl,'singername':singername,'songname':songname,'id':id,'timeLength':timeLength});
            this.$store.commit('setnowSongInfo', item);
            // 播放状态先false后设为true：避免用户在播放音乐时点击歌曲重新播放，导致player监听musicstatu状态没有更新
            this.$store.commit('setMusicStatu', false);
            this.$store.commit('setMusicStatu', true);
            this.$store.commit('addSongToList', item);
          }
        }

      },
      addToList(item) {
        if (item.error !== '需要付费') {
          this.$store.commit('addSongToList', item);
        } else {
          this.$message({
            type: 'error',
            showClose: true,
            message: '该歌曲需要付费无法播放哦',
            center: true
          })
        }
      },
      //  判断是否已经存在于我的收藏
      isMystar(id) {
        return this.$store.state.mystar.some(i => {
          if (i.id == id) return true   // eslint-disable-line
        })
      },
      // 点击我的收藏（喜欢）
      clickMystarBtn(item) {
        if (item.error !== '需要付费') {
          // 如果已经存在，则从我的收藏中去除
          if (this.isMystar(item.id)) {
            //  删除
            this.$store.commit('delSongFromMystar', item.id)
          } else {
            this.$store.commit('addSongToMystar', item);
          }
        } else {
          this.$message({
            type: 'error',
            showClose: true,
            message: '该歌曲需要付费无法播放哦',
            center: true
          })
        }
      }
    },

    watch: {
      ischeckall: function (newval) {
        if (this.checkall==true) {
          // 循环添加选中类
          this.checkboxNum=this.checkboxNum.map(i=>{
            return true
          })
        } else if (this.checkall==false) {
          this.checkboxNum=this.checkboxNum.map(i=>{
            return false
          })
        }
      },
      add: function (newval) {
        // 添加到播放列表中
        this.checkboxNum.map((i,index)=>{
          // 如果选中了
          if (i==true){
            this.$store.commit('addSongToList',this.$store.state.mystar[index])
          }
        })

      },
      cancel: function (newval) {
      //  取消收藏 删除需要倒着删 所以使用unshift
        let indexarr=[];
        this.checkboxNum.map((i,index)=>{
          if(i==true){
            indexarr.unshift(index)
            console.log(indexarr)
          }
        })
        indexarr.forEach(i=>{
          this.$store.commit('delSongFromMystar', this.$store.state.mystar[i].id)
        })
        this.songslist=this.$store.state.mystar
      }
    }

  }
</script>

<style scoped>
    .listitem {
        z-index: 1999;
    }

    .songslist {
        display: flex;
        padding-left: 0.5rem;
        height: 5rem;
        justify-content: space-between;
        border-bottom: 1px solid #575757;
    }

    .songslistleft {
        display: flex;
        align-items: center;
    }

    .songsimg {
        min-width: 3rem;
        height: 3rem;
    }

    .light {
        color: white;
        line-height: 1.5rem;
        height: 3rem;
        font-size: 0.9rem;
        padding-left: 0.5rem;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }

    .light span {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        /*vertical-align:middle;*/
    }

    .addbtn {
        padding-right: 0.5em;
        /*display:flex;*/
        padding-top: 2.3rem;

    }

    .songslistright {
        display: flex;
    }

    .mystar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 2.3rem;

    }

    .songsnum {
        min-width: 1.5rem;
        height: 3rem;
        line-height: 3rem;
    }

    .songslist:first-child .songsnum {
        color: gold;
        font-size: 2rem;
    }

    .songslist:nth-child(2) .songsnum {
        color: orange;
        font-size: 2rem;
    }

    .songslist:nth-child(3) .songsnum {
        color: silver;
        font-size: 2rem;
    }
    .checkboxdiv {
        position: absolute;
        left: 0;
        width: 100%;
        height: 5rem;
    }
    .checkboxdiv >>> span {
        float: left;
        top: 1rem;
    }
</style>
